<template>
    <div class="errorpage" id="bgstar" ref="bgstar" >
        <img class="errorimg" :src="require('@/assets/images/503.png')" alt="">
        <span v-for="(l,i) in spanNum " :key="i"  class="span-dots"
        :style="{top:l.y,left:l.x,transform:'scale('+l.scaler+')',animationDelay:l.rate,background:l.rgb}"
         >

        </span>
    </div>
</template>


<script>
export default {
    name:"nofFound",
    data(){
        return {
            spanNum:[]
        }
    },
    methods:{
        ranFunColor(min,max){
            return Math.floor(Math.random() * (max-min + 1 )+min)
        },
        spanInit(){
            var screenW = document.getElementById("bgstar").offsetWidth
            var screenH = this.$refs.bgstar.offsetHeight

            for(var i =0 ;i<550;i++){
                // 位置随机
                var x  = Math.floor(Math.random() * screenW)
                var y  = Math.floor(Math.random() * screenH)

                // 大小随机 
                var scaler = Math.random() * 1.5  

                // 频率随机
                var rate = Math.random() * 2.5 

                // 颜色随机 
                var r = this.ranFunColor(10,250)
                var g = this.ranFunColor(10,250)
                var b = this.ranFunColor(10,250)
                this.spanNum.push({
                    x:x+'px',
                    y:y+'px',
                    scaler:scaler,
                    rate:rate+'s',
                    rgb:'rgb('+r+','+g+','+b+')'
                })
            }
        }
    },
    mounted(){
        this.spanInit()
    }
}
</script>

<style lang="scss" scoped>
.errorpage{
    width:100%;
    height:100%;
    position: relative;
    background: rgba(0,0,0,1);
    overflow: hidden;
    .errorimg{
        width:280px;
        height:280px;
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        margin:auto;
    }
    .span-dots{
        position: absolute;
        animation: flash 3s alternate  infinite;
        width:3px;
        height:3px;
        border-radius: 50%;
    }

    @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>

